Google Charts API-এ ChartOptions একটি গুরুত্বপূর্ণ অংশ যা দিয়ে আপনি আপনার চার্টের কাস্টমাইজেশন করতে পারেন। এর মাধ্যমে আপনি চার্টের ভিজ্যুয়াল উপস্থাপন, আকার, রঙ, টাইটেল, লেজেন্ড, অক্ষের কাস্টমাইজেশন, গ্রিডলাইন, টুলটিপ ইত্যাদি কাস্টমাইজ করতে পারবেন।

এখানে ChartOptions ব্যবহার করে বিভিন্ন কাস্টমাইজেশন উদাহরণ দেওয়া হয়েছে।

ChartOptions এর প্রধান কাস্টমাইজেশন অপশনস

1. Title কাস্টমাইজেশন

চার্টের টাইটেল সেট করতে title অপশন ব্যবহার করা হয়। আপনি টাইটেলের স্টাইল যেমন রঙ, ফন্ট সাইজ, ইত্যাদি কাস্টমাইজ করতে পারেন।

chartOptions = {
  title: 'My Daily Activities', // Title
  titleTextStyle: {
    color: 'blue', // Title text color
    fontSize: 18, // Title text size
    bold: true, // Title text weight
    italic: true // Title text style
  }
};

2. Legend কাস্টমাইজেশন

চার্টের লেজেন্ড কাস্টমাইজ করতে legend অপশন ব্যবহার হয়। এটি আপনাকে লেজেন্ডের পজিশন, স্টাইল ইত্যাদি কাস্টমাইজ করার সুবিধা দেয়।

chartOptions = {
  legend: {
    position: 'top', // Position: top, bottom, left, right
    alignment: 'center', // Alignment: start, center, end
    textStyle: {
      color: 'black', // Text color
      fontSize: 14 // Font size
    }
  }
};

3. Chart Size কাস্টমাইজেশন

চার্টের আকার কাস্টমাইজ করতে width এবং height অপশন ব্যবহার করা হয়।

chartOptions = {
  width: 600, // Width of the chart
  height: 400 // Height of the chart
};

4. Colors কাস্টমাইজেশন

colors অপশন দিয়ে আপনি চার্টের বার, সেগমেন্ট, অথবা অন্যান্য উপাদানের রঙ কাস্টমাইজ করতে পারেন।

chartOptions = {
  colors: ['#4285F4', '#DB4437', '#0F9D58', '#F4B400'] // Custom colors for chart elements
};

5. Tooltip কাস্টমাইজেশন

চার্টের উপর হোভার করলে যেসকল তথ্য টুলটিপে প্রদর্শিত হয়, সেগুলি কাস্টমাইজ করতে tooltip অপশন ব্যবহার করা হয়।

chartOptions = {
  tooltip: {
    trigger: 'focus', // When to show tooltip: focus, selection
    isHtml: true, // Enable HTML content in tooltip
    textStyle: {
      color: 'black', // Tooltip text color
      fontSize: 14 // Tooltip font size
    }
  }
};

6. Axis কাস্টমাইজেশন (hAxis, vAxis)

অক্ষের টাইটেল, গ্রিডলাইন, এবং লেবেল কাস্টমাইজ করতে hAxis (horizontal axis) এবং vAxis (vertical axis) অপশন ব্যবহার করা হয়।

chartOptions = {
  hAxis: {
    title: 'Time', // Horizontal axis title
    minValue: 0, // Minimum value for horizontal axis
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12 // Axis text font size
    },
    gridlines: {
      color: 'lightgrey', // Gridlines color
      count: 5 // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales', // Vertical axis title
    textStyle: {
      color: 'red', // Axis text color
      fontSize: 14 // Axis text font size
    }
  }
};

7. Gridlines কাস্টমাইজেশন

চার্টের অক্ষের গ্রিডলাইন কাস্টমাইজ করতে gridlines ব্যবহার করা হয়।

chartOptions = {
  hAxis: {
    gridlines: {
      color: 'lightgrey', // Gridline color
      width: 0.5, // Gridline width
      count: 6 // Number of gridlines
    }
  },
  vAxis: {
    gridlines: {
      color: 'lightgrey',
      width: 0.5
    }
  }
};

8. 3D Chart কাস্টমাইজেশন

কিছু চার্ট যেমন PieChart, ColumnChart, BarChart-এ আপনি 3D ভিউ ব্যবহার করতে পারেন।

chartOptions = {
  is3D: true, // Enable 3D for the chart
  view: { min: 0, max: 10 }
};

9. Background Color কাস্টমাইজেশন

চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে backgroundColor ব্যবহার করা হয়।

chartOptions = {
  backgroundColor: '#f2f2f2' // Set background color
};

10. Font Style কাস্টমাইজেশন

চার্টের টেক্সটের ফন্ট স্টাইল এবং সাইজ কাস্টমাইজ করতে fontName, fontSize, fontWeight ব্যবহার করা হয়।

chartOptions = {
  titleTextStyle: {
    fontName: 'Arial', // Font family
    fontSize: 16, // Font size
    bold: true // Font weight
  }
};

চলমান উদাহরণ: Full Chart Customization

এখানে আমরা একটি Pie Chart তৈরি করব এবং বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করব।

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Customized Google Pie Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities',  // Title
    titleTextStyle: {
      color: 'blue', // Title text color
      fontSize: 18, // Title font size
      bold: true // Title bold
    },
    pieHole: 0.4,  // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'],  // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14 // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true, // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    }
  };
}

app.component.html:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

ChartOptions ব্যবহার করে আপনি Google Charts এর বিভিন্ন উপাদান কাস্টমাইজ করতে পারেন, যেমন title, legend, colors, tooltip, axis ইত্যাদি। এটি চার্টের দৃশ্যমানতা, ব্যবহারকারীর অভিজ্ঞতা এবং ফাংশনালিটি উন্নত করতে সহায়তা করে। বিভিন্ন কাস্টমাইজেশন অপশন ব্যবহার করে আপনি আপনার চার্টকে আপনার প্রয়োজন অনুযায়ী তৈরি করতে পারবেন।